<template>
  <div>
    <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
      <vxe-form-item
        title="角色名称"
        field="name"
        span="12"
        :item-render="{name: '$input', props: {type: 'text',placeholder: '请输入角色名称',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        title="排序"
        field="sortNum"
        span="12"
        :item-render="{name: '$input',props: {type: 'float',placeholder: '请输入数字',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        title="备注"
        field="remark"
        span="24"
        :item-render="{name: '$textarea', props: {placeholder: '请输入备注',disabled: disabledSubmit}}"></vxe-form-item>
      <vxe-form-item align="center" span="24">
        <template #default>
          <vxe-button type="submit" status="primary" :disabled="disabledSubmit">保存</vxe-button>
          <vxe-button type="reset" :disabled="disabledSubmit">重置</vxe-button>
          <!--          <vxe-button @click="$refs.xModal.close()">取消</vxe-button>-->
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { roleAdd, roleEdit } from '@/api/system'

export default {
  name: 'RoleForm',
  components: { },
  props: {
    isModal: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selectTab: 'tab1',
      iconChooseVisible: false,
      spanSize: 12,
      formData: {},
      formRules: {
        name: [
          { required: true, message: '请输入角色名称' }
        ],
        sortNum: [
          { required: true, message: '请输入排序' }
        ]
      },
      formItems: [],
      fromButtons: {
        align: 'center',
        span: 24,
        titleAlign: 'left',
        itemRender: {
          name: '$buttons',
          children: [{ props: { disabled: false, type: 'submit', content: '保存', status: 'primary' } }, {
            props: {
              disabled: false,
              type: 'reset',
              content: '重置'
            }
          }]
        }
      },
      disabledSubmit: false
    }
  },
  watch: {
    'formData.type' (newValue, oldValue) {
      this.selectType(newValue)
      console.log(this.formData)
    }
  },
  methods: {
    // 下拉表格相关
    inputValueChange (val) {
      console.log(val)
      this.formData.parentId = val
    },
    selectType (value) {
      if (value === 0) {
        this.spanSize = 12
      }
      if (value === 1) {
        this.spanSize = 6
      }
    },
    // 图标选择相关
    selectIcons () {
      this.iconChooseVisible = true
    },
    handleIconCancel () {
      this.iconChooseVisible = false
    },
    handleIconChoose (value) {
      console.log(value)
      this.formData.icon = value
      this.iconChooseVisible = false
    },

    /**
     * 当点击新增按钮时调用此方法
     */
    add () {
      this.formData = {
        id: null,
        name: '',
        sortNum: null,
        remark: ''
      }
    },
    edit (row) {
      this.formData = {
        id: row.id,
        name: row.name,
        sortNum: row.sortNum,
        createDate: row.createDate,
        remark: row.remark
      }
      console.log('edit', this.formData)
    },
    Detail (row) {
      this.formData = {
        id: row.id,
        name: row.name,
        sortNum: row.sortNum,
        createDate: row.createDate,
        remark: row.remark
      }
      console.log('Detail', this.formData)
    },

    // 新增提交
    RoleAdd (data) {
      roleAdd(data).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          console.log('reloadData', this.formData)
          this.$XModal.message({ content: '新增成功', status: 'success' })
          this.$emit('reloadData', this.formData)
        } else if (resData.code >= 400) {
          throw resData
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      })
    },
    // 编辑提交
    RoleEdit (data) {
      roleEdit(data).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          console.log('reloadData', this.formData)
          console.log('selectRow', this.selectRow)
          this.$XModal.message({ content: '编辑成功', status: 'success' })
          this.$emit('reloadData', this.formData)
        } else if (resData.code >= 400) {
          throw resData
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      })
    },
    // 提交按钮点击事件
    submitEvent () {
      this.$emit('modalControl', { submitLoading: true })

      if (this.isModal === '新增') {
        this.RoleAdd(JSON.stringify(this.formData))
      } else if (this.isModal === '编辑') {
        this.RoleEdit(JSON.stringify(this.formData))
      }
    }
  }
}
</script>

<style lang='less'>

</style>
